<%@ page pageEncoding="UTF-8"%>

<%@ include file="includes/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="includes/admin_header.jsp">
  <jsp:param name="pageTitle" value="Update event" />
</jsp:include>

<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/static/inittinymce.js"></script>

<script type="text/javascript">
  $(function() {
    $('.date-picker').datepicker();
  });
</script>
<script type="text/javascript">
  var editor;
  var onloadCallbacks = [];
  window.onload = function() {
    for (var i = 0; i < onloadCallbacks.length; i++) {
      onloadCallbacks[i].call();
    }
    editor = tinyMCE.get('description');
  }
</script>
<script type="text/javascript">
  var otherCheckbox = null;
  var otherTextField = null;

  onloadCallbacks.push(function() {
    otherCheckbox = document.getElementById('otherCheckbox');
    otherTextField = document.getElementById('otherTextField');

    otherTextField.onblur = function() {
      if (otherTextField.value == '') {
        otherCheckbox.checked = false;
        displayDefaultText();
      }
    }

    otherTextField.onfocus = function() {
      if (otherTextField.defaultTextIsVisible) {
        otherTextField.defaultTextIsVisible = false;
        otherTextField.style.color = 'black';
        otherTextField.value = '';
      } else {
        otherCheckbox.checked = true;
      }
    }

    otherTextField.onkeypress = function() {
      if (otherTextField.value != '') {
        otherCheckbox.checked = true;
      }
    }

    otherCheckbox.onchange = function() {
      if (otherCheckbox.checked && otherTextField.defaultTextIsVisible) {
        otherTextField.value = '';
        otherTextField.focus();
      }
    }

    if (otherTextField.value == '') {
      displayDefaultText();
    }
  });

  function displayDefaultText() {
    otherTextField.defaultTextIsVisible = true;
    otherTextField.value = 'e.g. Google Calendar API';
    otherTextField.style.color = 'gray';
  }
</script>

<style type="text/css">
  #topics-table td {
    padding-right: 20px;
  }
  #topics-table input {
    width: auto;
  }
</style>

<div id="title">
  <h2 style="color:#333333">Update event</h2>
</div>

<form:form method="post" commandName="event" onsubmit="editor.getContent();">
  <div class="form-block">
    <span class="label">
      Name *
    </span>
    <form:input path="name"/>
    <span class="error">
      <form:errors path="name"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Time zone *
    </span>
    <form:select path="timeZone">
      <form:option label="UTC-11" value="-11"/>
      <form:option label="UTC-10" value="-10"/>
      <form:option label="UTC-9" value="-9"/>
      <form:option label="UTC-8" value="-8"/>
      <form:option label="UTC-7" value="-7"/>
      <form:option label="UTC-6" value="-6"/>
      <form:option label="UTC-5" value="-5"/>
      <form:option label="UTC-4:30" value="-4.5"/>
      <form:option label="UTC-4" value="-4"/>
      <form:option label="UTC-3:30" value="-3.5"/>
      <form:option label="UTC-3" value="-3"/>
      <form:option label="UTC-2" value="-2"/>
      <form:option label="UTC-1" value="-1"/>
      <form:option label="UTC±0" value="+0"/>
      <form:option label="UTC+1" value="+1"/>
      <form:option label="UTC+2" value="+2"/>
      <form:option label="UTC+3" value="+3"/>
      <form:option label="UTC+3:30" value="+3.5"/>
      <form:option label="UTC+4" value="+4"/>
      <form:option label="UTC+5" value="+5"/>
      <form:option label="UTC+5:30" value="+5.5"/>
      <form:option label="UTC+5:45" value="+5.75"/>
      <form:option label="UTC+6" value="+6"/>
      <form:option label="UTC+6:30" value="+6.5"/>
      <form:option label="UTC+7" value="+7"/>
      <form:option label="UTC+8" value="+8"/>
      <form:option label="UTC+9" value="+9"/>
      <form:option label="UTC+9:30" value="+9.5"/>
      <form:option label="UTC+10" value="+10"/>
      <form:option label="UTC+11" value="+11"/>
      <form:option label="UTC+12" value="+12"/>
      <form:option label="UTC+13" value="+13"/>
      <form:option label="UTC+14" value="+14"/>
    </form:select>
    <span class="error">
      <form:errors path="timeZone"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Start time *
    </span>
    <form:input path="startDate" cssClass="date-picker" cssStyle="width:145px"/>
    <form:select path="startTime" cssStyle="width:100px">
      <form:option label="12:00 a.m." value="0000"/>
      <form:option label="12:30 a.m." value="0030"/>
      <form:option label="1:00 a.m." value="0100"/>
      <form:option label="1:30 a.m." value="0130"/>
      <form:option label="2:00 a.m." value="0200"/>
      <form:option label="2:30 a.m." value="0230"/>
      <form:option label="3:00 a.m." value="0300"/>
      <form:option label="3:30 a.m." value="0330"/>
      <form:option label="4:00 a.m." value="0400"/>
      <form:option label="4:30 a.m." value="0430"/>
      <form:option label="5:00 a.m." value="0500"/>
      <form:option label="5:30 a.m." value="0530"/>
      <form:option label="6:00 a.m." value="0600"/>
      <form:option label="6:30 a.m." value="0630"/>
      <form:option label="7:00 a.m." value="0700"/>
      <form:option label="7:30 a.m." value="0730"/>
      <form:option label="8:00 a.m." value="0800"/>
      <form:option label="8:30 a.m." value="0830"/>
      <form:option label="9:00 a.m." value="0900"/>
      <form:option label="9:30 a.m." value="0930"/>
      <form:option label="10:00 a.m." value="1000"/>
      <form:option label="10:30 a.m." value="1030"/>
      <form:option label="11:00 a.m." value="1100"/>
      <form:option label="11:30 a.m." value="1130"/>
      <form:option label="12:00 p.m." value="1200"/>
      <form:option label="12:30 p.m." value="1230"/>
      <form:option label="1:00 p.m." value="1300"/>
      <form:option label="1:30 p.m." value="1330"/>
      <form:option label="2:00 p.m." value="1400"/>
      <form:option label="2:30 p.m." value="1430"/>
      <form:option label="3:00 p.m." value="1500"/>
      <form:option label="3:30 p.m." value="1530"/>
      <form:option label="4:00 p.m." value="1600"/>
      <form:option label="4:30 p.m." value="1630"/>
      <form:option label="5:00 p.m." value="1700"/>
      <form:option label="5:30 p.m." value="1730"/>
      <form:option label="6:00 p.m." value="1800"/>
      <form:option label="6:30 p.m." value="1830"/>
      <form:option label="7:00 p.m." value="1900"/>
      <form:option label="7:30 p.m." value="1930"/>
      <form:option label="8:00 p.m." value="2000"/>
      <form:option label="8:30 p.m." value="2030"/>
      <form:option label="9:00 p.m." value="2100"/>
      <form:option label="9:30 p.m." value="2130"/>
      <form:option label="10:00 p.m." value="2200"/>
      <form:option label="10:30 p.m." value="2230"/>
      <form:option label="11:00 p.m." value="2300"/>
      <form:option label="11:30 p.m." value="2330"/>
    </form:select>
    <span class="error">
      <form:errors path="startDate"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      End time *
    </span>
    <form:input path="endDate" cssClass="date-picker" cssStyle="width:145px"/>
    <form:select path="endTime" cssStyle="width:100px">
      <form:option label="12:00 a.m." value="0000"/>
      <form:option label="12:30 a.m." value="0030"/>
      <form:option label="1:00 a.m." value="0100"/>
      <form:option label="1:30 a.m." value="0130"/>
      <form:option label="2:00 a.m." value="0200"/>
      <form:option label="2:30 a.m." value="0230"/>
      <form:option label="3:00 a.m." value="0300"/>
      <form:option label="3:30 a.m." value="0330"/>
      <form:option label="4:00 a.m." value="0400"/>
      <form:option label="4:30 a.m." value="0430"/>
      <form:option label="5:00 a.m." value="0500"/>
      <form:option label="5:30 a.m." value="0530"/>
      <form:option label="6:00 a.m." value="0600"/>
      <form:option label="6:30 a.m." value="0630"/>
      <form:option label="7:00 a.m." value="0700"/>
      <form:option label="7:30 a.m." value="0730"/>
      <form:option label="8:00 a.m." value="0800"/>
      <form:option label="8:30 a.m." value="0830"/>
      <form:option label="9:00 a.m." value="0900"/>
      <form:option label="9:30 a.m." value="0930"/>
      <form:option label="10:00 a.m." value="1000"/>
      <form:option label="10:30 a.m." value="1030"/>
      <form:option label="11:00 a.m." value="1100"/>
      <form:option label="11:30 a.m." value="1130"/>
      <form:option label="12:00 p.m." value="1200"/>
      <form:option label="12:30 p.m." value="1230"/>
      <form:option label="1:00 p.m." value="1300"/>
      <form:option label="1:30 p.m." value="1330"/>
      <form:option label="2:00 p.m." value="1400"/>
      <form:option label="2:30 p.m." value="1430"/>
      <form:option label="3:00 p.m." value="1500"/>
      <form:option label="3:30 p.m." value="1530"/>
      <form:option label="4:00 p.m." value="1600"/>
      <form:option label="4:30 p.m." value="1630"/>
      <form:option label="5:00 p.m." value="1700"/>
      <form:option label="5:30 p.m." value="1730"/>
      <form:option label="6:00 p.m." value="1800"/>
      <form:option label="6:30 p.m." value="1830"/>
      <form:option label="7:00 p.m." value="1900"/>
      <form:option label="7:30 p.m." value="1930"/>
      <form:option label="8:00 p.m." value="2000"/>
      <form:option label="8:30 p.m." value="2030"/>
      <form:option label="9:00 p.m." value="2100"/>
      <form:option label="9:30 p.m." value="2130"/>
      <form:option label="10:00 p.m." value="2200"/>
      <form:option label="10:30 p.m." value="2230"/>
      <form:option label="11:00 p.m." value="2300"/>
      <form:option label="11:30 p.m." value="2330"/>
    </form:select>
    <span class="error">
      <form:errors path="endDate"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Street address *
    </span>
    <form:input path="streetAddress"/>
    <span class="error">
      <form:errors path="streetAddress"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Room
    </span>
    <form:input path="room"/>
    <span class="error">
      <form:errors path="room"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      City *
    </span>
    <form:input path="city"/>
    <span class="error">
      <form:errors path="city"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      State
    </span>
    <form:input path="state"/>
    <span class="error">
      <form:errors path="state"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Country *
    </span>
    <form:select path="country" items="${model.countries}" itemLabel="name" itemValue="name"/>
    <span class="error">
      <form:errors path="country"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      External URL
    </span>
    <span class="description">
      (If you use an event site like meetup.com or have an event page on your website)
    </span>
    <div>
      <form:input path="url"/>
    </div>
    <span class="error">
      <form:errors path="url"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Topic(s)
    </span>
    <div style="font-size:10pt">
      <table id="topics-table">
        <tr>
          <td>
            <form:checkbox path="onAndroid"/> Android
          </td>
          <td>
            <form:checkbox path="onGoogleChromeExtensions"/> Google Chrome Extensions
          </td>
          <td>
            <form:checkbox path="onGoogleWaveApis"/> Google Wave APIs
          </td>
          <td>
            <form:checkbox path="onOther" id="otherCheckbox"/> Other:
            <form:input path="customTopic" id="otherTextField"/>
          </td>
        </tr>
        <tr>
          <td>
            <form:checkbox path="onGoogleAjaxApis"/> Google AJAX APIs
          </td>
          <td>
            <form:checkbox path="onGoogleEarthApis"/> Google Earth APIs
          </td>
          <td>
            <form:checkbox path="onGoogleWebToolkit"/> Google Web Toolkit
          </td>
        </tr>
        <tr>
          <td>
            <form:checkbox path="onGoogleAppEngine"/> Google App Engine
          </td>
          <td>
            <form:checkbox path="onGoogleMapsApis"/> Google Maps APIs
          </td>
          <td>
            <form:checkbox path="onOpenSocial"/> OpenSocial
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="form-block">
    <span class="label">
      Description *
    </span>
    <div>
      <form:textarea path="description"/>
    </div>
    <span class="error">
      <form:errors path="description"/>
    </span>
  </div>

  <hr/>

  <div class="form-block">
    <span class="label">
      Number of attendees
    </span>
    <div>
      <form:input path="attendeeCount" cssStyle="width:50px"/>
    </div>
    <span class="error">
      <form:errors path="attendeeCount"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Notes
    </span>
    <div>
      <form:textarea path="notes"/>
    </div>
    <span class="error">
      <form:errors path="notes"/>
    </span>
  </div>

  <input type="submit" align="center" value="Submit"/>
</form:form>

<%@ include file="includes/footer.jsp" %>